<template>
	<div class="mt-4">
		<div
			v-if="highqualityPlayList?.length && !$route.query.hideTop"
			class="w-100 highqualityItem overflow-hidden rounded-4 position-relative cursor-pointer"
		>
			<img class="w-100 highqualityBackground position-absolute translate-y--50" :src="highqualityPlayList[0].coverImgUrl" alt="" />
			<div class="w-100 h-100 position-absolute start-0 top-0 mask"></div>
			<div class="d-flex">
				<img class="highqualityCover position-relative rounded-3" :src="highqualityPlayList[0].coverImgUrl" alt="" />
				<div class="highqualityColumn2 d-flex flex-column justify-content-center">
					<div class="rounded-pill crownOuter flex-center">
						<HighQualityPlayListIcon class="translate-y--10" width="18" height="18" />
						<div class="ms-2">精品歌单</div>
					</div>
					<div class="fs-5 mt-4 text-white">{{ highqualityPlayList[0].name }}</div>
				</div>
			</div>
		</div>
		<PlayListGroupRow
			class="my-3"
			:current="current"
			@onClickCurrent="groupPanelVisible = !groupPanelVisible"
			@onClickCat="confirmPanelItem"
			:categoryList="hotCatList"
			empty="全部歌单"
		>
			<template #panel>
				<SongListGroupPanel v-model:visible="groupPanelVisible" @click.stop @confirm="confirmPanelItem" :current="current" />
			</template>
		</PlayListGroupRow>
		<div class="d-flex flex-wrap justify-content-between">
			<SongListSquare
				v-for="item in playlists"
				:key="item.id"
				:picUrl="item.coverImgUrl"
				:name="item.name"
				:playCount="item.playCount"
				:creator="item.creator"
				class="mb-5"
				paddingSize="22%"
				@onClickCover="$router.push({ name: 'createdMusicList', query: { id: item.id } })"
				@onClickPlay="$router.push({ name: 'createdMusicList', query: { id: item.id, immediate: true } })"
			/>
			<div v-for="item in playlists.length % 4" :key="item" style="width: 23%"></div>
		</div>
	</div>
</template>

<script lang="ts">
import { getHighqualityPlayListApi, getPlayListHotCatListApi, getPlayListApi } from "@/api/playList";
import { AxiosResponseProps } from "@/utils/request";
import { computed, defineComponent, reactive, toRefs } from "vue";
import { LocationQueryRaw, useRoute, useRouter } from "vue-router";
export default defineComponent({
	setup() {
		const route = useRoute();
		const router = useRouter();
		const hideTop = computed(() => route.query.hideTop);
		const state = reactive({
			highqualityPlayList: [],
			playListCatList: [],
			playListSub: [],
			hotCatList: [],
			groupPanelVisible: false,
			current: computed({
				get: () => route.query.cat || "全部歌单",
				set: (cat) => {
					let query: LocationQueryRaw = { cat };
					if (hideTop.value) {
						query.hideTop = "true";
					}
					router.push({ name: "songList", query });
				},
			}),
			playlists: [],
		});
		interface PlayListResponse extends AxiosResponseProps {
			playlists: any[];
		}
		interface HotCatListResponse extends AxiosResponseProps {
			tags: any[];
		}
		const fetchData = () => {
			getHighqualityPlayListApi({ limit: 1 }).then((res: Partial<PlayListResponse>) => {
				if (res.code === 200) {
					state.highqualityPlayList = res.playlists;
				}
			});
			getPlayListHotCatListApi().then((res: Partial<HotCatListResponse>) => {
				if (res.code === 200) {
					state.hotCatList = res.tags;
					// console.log(state.hotCatList);
				}
			});
		};
		fetchData();
		const confirmPanelItem = (item) => {
			const { name } = item;
			state.current = name;
			getPlayListFromCat(name);
		};
		const getPlayListFromCat = (currentCat?: string) => {
			let params = currentCat ? { cat: currentCat } : {};
			getPlayListApi(params).then((res: Partial<PlayListResponse>) => {
				state.playlists = res.playlists;
			});
		};
		getPlayListFromCat();
		return {
			...toRefs(state),
			confirmPanelItem,
		};
	},
});
</script>

<style scoped lang="scss">
.highqualityItem {
	$itemHeight: 170px;
	height: $itemHeight;
	.highqualityBackground {
		@include blur(80px);
		z-index: 1;
	}
	.mask {
		z-index: 2;
		background-color: rgba($color: #000000, $alpha: 0.2);
	}
	$distance: 14px;
	.highqualityCover {
		z-index: 3;
		margin-left: $distance;
		margin-top: $distance;
		height: calc(#{$itemHeight} - #{$distance} * 2);
		width: calc(#{$itemHeight} - #{$distance} * 2);
	}
	.highqualityColumn2 {
		margin-top: $distance;
		margin-left: $distance;
		z-index: 3;
		.crownOuter {
			width: 90px;
			height: 26px;
			border: 1px solid #deab67;
			color: #deab67;
		}
	}
}
</style>
